function nav(){
	$(".nav-list").children("li").find("a").hover(
	
		function(){
			$(this).addClass("active2")
		},
		function(){
			$(this).removeClass("active2");
			
		}
	)
}

function navx(){
	$(".nav-xlist").children("a").find("li").hover(
	
		function(){
			$(this).addClass("active")
		},
		function(){
			$(this).removeClass("active");
			
		}
	)
}

function large(){
	
   class Details{
		constructor(){
			this.cont = document.querySelector(".content");
			this.url = "http://localhost/ClassProject/huinongwang/project/static/good-list.json";

			this.load();
			this.getId();
		}
		getId(){
			// 获取地址栏的url后拼接的数据
			this.id = location.search.slice(1).split("=")[1];
		}
		load(){
			// 请求商品数据库：json
			ajax({
				type:"get",
				url:this.url
			}).then((res)=>{
				this.res = JSON.parse(res);
				// console.log(res);
				this.display();
			})
			
		}
		
		display(){
			// 将接收到的商品id和商品数据中的id作比较
			this.res.forEach(val => {
				if(val.goodsId === this.id){
<<<<<<< HEAD
					// console.log(val);
					// 根据val的数据内容化，渲染商品详情页
					// console.log(1);
=======
					console.log(val);
					// 根据val的数据内容化，渲染商品详情页
					console.log(1);
>>>>>>> 5d0a21b06dc39f26b412b2b946e3b19ba3adfcec
					// console.log(this);
					this.cont.innerHTML = "hello";
					this.cont.innerHTML = `
						<div class="cont-l">
							<div class="s_box">
								<img src="${val.img.largeImg[0]}" alt="">
								<span></span>
								<p class="mask"></p>
							</div>
							<div class="b_box">
								<img src="${val.img.largeImg[0]}" alt="">
							</div>
							<ul class="list">
							${this.createLi(val.img.smallImg)}
							</ul>
						</div>
						<div class="cont-r">
							<div class="cont-rs">
								<div class="rsh"><span>优选</span></div>
								<i>海南黄肉菠萝蜜20-40斤包邮批发零售一件代发</i>
								<p>更新时间:&nbsp;&nbsp;2020年03月31日&nbsp;&nbsp; 11:52:59</p>
							</div>
							
							<div class="cont-rx">
								<ul>
									<li>
										<span>价格</span>
										<i>3.50元 /斤</i>
									</li>
									<li>
										<span>起批量</span>
										<em>100斤 起批</em>
									</li>
									<li>
										<span>优惠劵</span>
										<div class="youhui"><a href="">满99减2</a></div>
										<a href="">领劵</a>
									</li>
								</ul>
							</div>
							<div class="cont-rxx">
								<div class="cont-xa">发货地址: <span>海南省万宁市万宁市</span></div>
								<div class="cont-xa">
									物流费用: 
									<span>包邮除西北六省</span>
									<a href=""><i>查看详情</i></a>
								</div>	
							</div>
							<div class="option">
								<span>规格选择:</span>
								<ul class="option1">
									<li class="">
									<p>金枕猫山王8～9斤一级棒包邮，8.00斤/箱</p>	
									</li>
									<li>
									<p>金枕猫山王8～9斤一级棒包邮，8.00斤/箱</p>	
									</li>
									<li>
									<p>金枕猫山王8～9斤一级棒包邮，8.00斤/箱</p>	
									</li>
									<li>
									<p>金枕猫山王8～9斤一级棒包邮，8.00斤/箱</p>	
									</li>
									<li>
									<p>金枕猫山王8～9斤一级棒包邮，8.00斤/箱</p>	
									</li>
									<li>
									<p>金枕猫山王8～9斤一级棒包邮，8.00斤/箱</p>	
									</li>
								</ul>
							</div>
							<a href="">
								<div class="buy">
									<i>立即采购</i>
								</div>
							</a>`;
					// 页面渲染完成后，可以执行放大镜的效果了
					// 执行放大镜时，将遍历到的数据，传入，方便切换大图
					new Large(val.img);
					addEvent1();
				}
			});
		}
		createLi(arr){
			// 根据小图的数量生成对应的结构的功能
			let str = "";
			for(let i=0;i<arr.length;i++){
				str += `<li><img src="${arr[i]}" alt=""></li>`
			}
			return str;
		}
	}
	new Details;
	
	
	
	
	class Large{
		constructor(imgData){
			this.sBox = document.querySelector(".s_box");
			this.sImg = document.querySelector(".s_box img");
			this.sSpan = document.querySelector(".s_box span");
			this.bBox = document.querySelector(".b_box");
			this.bImg = document.querySelector(".b_box img");
			this.li = document.querySelectorAll(".list li");
			this.imgData = imgData;
			
			this.addEvent();
		}
		addEvent(){
			var that = this;
			this.sBox.onmouseover = function(){
				that.over();
			}
			this.sBox.onmousemove = function(eve){
				var e = eve || window.event;
				that.move(e);
			}
			this.sBox.onmouseout = function(){
				that.out();
			}
			for(let i=0;i<this.li.length;i++){
				this.li[i].onclick = function(){
					that.sImg.src = that.imgData.largeImg[i];
					that.bImg.src = that.imgData.largeImg[i];
				}
			}
		}
		over(){
			this.sSpan.style.display = "block";
			this.bBox.style.display = "block";
		}
		move(e){
			// 因为页面结构日渐复杂，所以将pageX改回offsetX，但是灰色小滑块会抖，解决方式，纯布局结局
			var l = e.offsetX - this.sSpan.offsetWidth/2;
			var t = e.offsetY - this.sSpan.offsetHeight/2;
			if(l<0) l=0;
			if(t<0) t=0;
			if(l > this.sBox.offsetWidth - this.sSpan.offsetWidth){
				l = this.sBox.offsetWidth - this.sSpan.offsetWidth;
			}
			if(t > this.sBox.offsetHeight - this.sSpan.offsetHeight){
				t = this.sBox.offsetHeight - this.sSpan.offsetHeight;
			}
			this.sSpan.style.left = l + "px";
			this.sSpan.style.top = t + "px";
			var x = l / (this.sBox.offsetWidth - this.sSpan.offsetWidth);
			var y = t / (this.sBox.offsetHeight - this.sSpan.offsetHeight);
			this.bImg.style.left = (this.bBox.offsetWidth - this.bImg.offsetWidth) * x + "px";
			this.bImg.style.top = (this.bBox.offsetHeight - this.bImg.offsetHeight) * y + "px";
		}
		out(){
			this.sSpan.style.display = "none";
			this.bBox.style.display = "none";
		}
	}

}
function addEvent1(){
	$(".option1").find("li").click(
		function(){
			$(this).addClass("active3").siblings().removeClass("active3");
		}
	)
}


function dets(){
	class Index{
	        constructor(){
				this.resig = document.querySelector(".resig");
				this.Name = document.getElementById("user")

	            // 对于需要验证是否登录的页面来说，应该立即获取是否登录的信息
	            this.init();
	        }
	        init(){
	            // 获取之后，简单处理数据
	            this.m = sessionStorage.getItem("userMsg");
	            this.m = this.m ? JSON.parse(this.m) : {};
	            // 如果有登录成功后的信息
	            if(this.m.user){
	                // 显示登录的用户名
					this.Name.innerHTML = this.m.user;
					this.resig.style.display = "none";

	            }
	        }
	    }
	    new Index;

}